<!DOCTYPE html>

<html>
    
    <head>
        
        <meta charset=UTF-8 />
        <title>HTML5 Canvas と JavaScript を使って作る追尾サンプル</title>
        
        <!-- util系 -->
        <script>
            var $id = function(id) { return document.getElementById(id); }
        </script>
        
        <!-- application系 -->
        <script>
            
            // 定数
            var FPS             = 60;
            var SCREEN_WIDTH    = 640;
            var SCREEN_HEIGHT   = 480;
            
            // グローバル
            var global = {};
            global.context = null;
            
            window.onload = function()
            {
                init();
                run();
            };
            
            var init = function()
            {
                var canvas = $id("c");
                global.context = canvas.getContext("2d");
            };
            
            var run = function()
            {
                var _run = function()
                {
                    update();
                    draw();
                    
                    setTimeout(_run, 1000.0/FPS);
                };
                
                setTimeout(_run, 1000.0/FPS);
            };
            
            var update = function()
            {
                
            };
            
            var draw = function()
            {
                var ctx = global.context;
                ctx.fillStyle = "black";
                ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                
                // 円を描画
                ctx.fillStyle = "white";
                ctx.beginPath();
                ctx.arc(100, 100, 20, 0, Math.PI*2, false);
                ctx.fill();
                ctx.closePath();
            };
            
        </script>
        
    </head>
    <body>
        <header>
            <h1>HTML5 Canvas と JavaScript を使って作る追尾サンプル</h1>
            <p>
                メインループを作成, 円を描画
            </p>
        </header>
        <canvas id="c" width="640" height="480"></canvas>
    </body>
    
</html>